<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #yanzhengma {
            width: 45px;
        }

        #btn {
            margin-left: 60px;
            width: 100px;
        }
    </style>
</head>

<body>
    登录：<input type="text" name="" id="num1"><br>
    密码：<input type="text" name="" id="num2"><br>
    验证码：<input type="text" id="yanzheng">
    <span id="yanzhengma"></span></br>
    <button id="btn">登录</button>
</body>
<script>

    var n2;
    n2 = yanzhengma.innerHTML;
    var res;
    for (i = 0; i < 1; i++) {
        for (j = 0; j < 4; j++) {
            n2 += randomNum(0, 16).toString(16);
        }
        res = yanzhengma.innerHTML = n2
        console.log(res)
    }
    btn.onclick = function () {
        var n1 = String(yanzheng.value)
        n1 = String(yanzheng.value);
        console.log(n1)
        if (n1 === res) {
            alert('验证成功');
        }
        else {
            alert('验证失败,请重新输入')
        }
    }
    function randomNum(m, n) {
        var max, min;
        max = n > m ? n : m;
        min = m < n ? m : n;

        return parseInt(Math.random() * (max - min) + min);
    }








</script>

</html>